<template>
	<view style="padding-top: 20px;">
		<view class="list" v-if="logs.length > 0">
			<view v-for="item in logs">
				<view class="wrap">
					<u-row gutter="16">
						<u-col span="2">
							<view class="demo-layout bg-purple">
								<u-icon name="rmb-circle-fill" size="63" color="#F7AD1D"></u-icon>
							</view>
						</u-col>
						<u-col span="7">
							<view class="demo-layout bg-purple-light">
								<view v-if="item.comment == '管理员修改余额' && item.type == 'point'">
									管理员修改积分
								</view>
								<view v-else>
									{{item.comment}}
								</view>
								<view class="time">{{$u.timeFormat(item.createdTime, 'yyyy-mm-dd hh:MM:ss')}}</view>
							</view>
						</u-col>
						<u-col span="3">
							<view class="demo-layout bg-purple-dark">
								<text v-if="item.amount > 0" class="add">{{item.amount}}</text>
								<text v-if="item.amount < 0" class="dev">{{item.amount}}</text>
							</view>
						</u-col>
					</u-row>
				</view>
				<u-line />
			</view>

			<u-loadmore :status="status" />
		</view>
		<view v-else>
			<u-empty text="暂无记录" mode="list"></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				logs: [],
				page: 1,
				limit: 20,
				status: 'loadmore',
				type: 'amount'
			}
		},
		onLoad(options) {
			console.log(options)
			if(options.type != undefined){
				this.type = options.type
				if(this.type == 'amount'){
					uni.setNavigationBarTitle({
						title: '余额记录'
					})
				}
			}
			this.getLogs()
		},
		onReachBottom() {
			this.page++;
			this.getLogs()
		},
		methods: {
			getLogs() {
				this.request.get(`api/balance-logs`, {
					"@filter": `entity.getType() == '${this.type}'`,
					"@order": "entity.createdTime|DESC",
					limit: this.limit,
					page: this.page
				}).then((res) => {
					console.log(res)
					if (this.page == 1) {
						this.logs = res.data
					} else {
						for (let i of res.data) {
							this.logs.push(i)
						}
					}
					if (res.data.length < this.limit) {
						this.status = 'nomore'
					}
				})
			}
		}
	}
</script>

<style>
	.time{
		color:#909399;
		font-size: 13px;
	}
	.add{
		color:#18B566;
		font-weight: bold;
		font-size: 16px;
	}
	.dev{
		color: #909399;
		font-weight: bold;
		font-size: 16px;
	}
	.wrap{
		padding: 10px 0px
	}
</style>
